<template>
  <div class="logincom">
    <div class="zhong">
        <!-- submit.prevent:阻止提交事件的刷新页面这种默认行为 -->
        <form @submit.prevent="login()">
            <h2>登录页</h2>
            <aside>
                <p>账号：</p>
                <input type="text" required v-model.lazy.trim="username">
            </aside>
            <aside>
                <p>密码：</p>
                <input type="password" required v-model.lazy.trim="pwd">
            </aside>

            <aside class="a1">
                <input type="checkbox" v-model="isRem"/>
                <p>记住密码</p>
            </aside>
            
            <button @click="zhuc()">注册</button>
            

            <input type="submit" value="登录" class="a2">
        </form>
        
    </div>
  </div>
</template>

<script>

//选项api ---vue2
export default {
    name : "LoginCom",
    //存储组件的数据
    data(){
        return{
            username : '', //用v-model将输入框的value值直接赋值给username变量
            pwd : '',
            isRem : false, //fa;se: 默认不勾选
        }
    },
    mounted(){

        let isremmeber = localStorage.getItem('loginRem');
        console.log(isremmeber);
//判断上一次是否记住密码
        this.username = isremmeber=='true' ? localStorage.getItem('loginuser'): '';
        this.pwd = isremmeber=='true' ? localStorage.getItem('loginpwd'): '';
        this.isRem = isremmeber=='true' ? true : false;

        //上一次登录时记住密码的状态
        //判断上一次是否记住密码
        /*if( isremmeber == 'true' ){
            //上一次记住密码，从存储内提取上一次的数据
            this.username = localStorage.getItem('loginuser');
            this.pwd = localStorage.getItem('loginpwd');
            this.isRem = true;
        }else{
            //上一次没有记住密码，不显示数据
            this.username = '';
            this.pwd = '';
            this.isRem = '';
        }*/

    },
    // methods对象：存储事件函数
    methods:{
        //登录函数
        login(){
            const user = [
                {username : 'admin1' , pwd : 123456},
                {username : 'admin2' , pwd : 123654},
                {username : 'admin3' , pwd : 456123},
                {username : 'admin4' , pwd : 123564},
                {username : 'admin5' , pwd : 132456},
                {username : 'admin6' , pwd : 142356},
            ];
            //根据输入框输入的账号和密码，如果输入的数据跟上面数组中的任意一组数组匹配，我们认为登录成功：
                //1.记录登录状态到本地存储localStorage
                //2.跳转到首页
            //循环遍历
            /*user.forEach( item =>{
                if( item.username == this.username && item.pwd == this.pwd ){
                    sessionStorage.setItem('islogin','true');
                    //编程式导航
                    this.$router.push('/home');
                    //终止循环
                    return;
                }
            } )*/
           let result = user.filter( item => {
            //
            return item.username == this.username && item.pwd == this.pwd
           } );
           console.log(result);
           //判断是否登陆成功
           if( result.length > 0 ){

               //在登录成功的前提下，判断是否需要记住密码
               if(this.isRem){
                   localStorage.setItem('loginuser' ,this.username);
                   localStorage.setItem('loginpwd' ,this.pwd);
                   localStorage.setItem('loginRem' ,this.isRem);
                   }else{
                       //将上一次存储到本地村粗的登录账号和密码进行清楚
                       localStorage.clear();
                   }
               

            sessionStorage.setItem('islogin', this.username);


               if ( this.isRem ) {
                    localStorage.setItem('loginuser',this.username);
                    localStorage.setItem('loginpwd',this.pwd );
                    localStorage.setItem('loginRem',this.isRem);
                }else{
                    localStorage.clear();
                }
            sessionStorage.setItem('islogin',this.username);

            //编程式导航
            this.$router.push('/home');
           }else{
            alert('登陆失败')
           }
        },
        zhuc(){
            this.$router.push('/register');
        }
    }
}
</script>

<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    /*溢出隐藏**/
    overflow: hidden;
    /* background: orange; */
}
.zhong{
    /* background-color: rgb(231, 23, 127); */
    margin-top: 20%;
    display: flex;
    flex-direction: column;
    margin-left: 28%;
    align-items: center;
    border: solid 0.2rem;
    width: 40%;
}
.zhong h2{
    margin-top: 20px;
}
.zhong aside{
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.zhong input{
    padding: 0;
    border: none;
    border-bottom: solid 0.1rem;
    outline: none;
}
.zhong .a2{
    margin-top: 20px;
    width: 30%;
    height: 30px;
    background: green;
    border: none;
    border-radius: 6px;
    margin-bottom: 20px;
}
.zhong .a1{
    margin-right: 8.8rem;
}
</style>